<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="130px">
				<el-form-item label="状态">
					<el-select
						class="w-60"
						v-model="queryParams.status"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" value/>
						<el-option label="审核中" :value="1"/>
						<el-option label="成功" :value="2"/>
                        <el-option label="失败" :value="3"/>
					</el-select>
				</el-form-item>
                <el-form-item label="申请时间" class="piker">
					<el-date-picker
						v-model="queryParams.create_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
                <el-form-item label="操作完成时间" class="piker">
					<el-date-picker
						v-model="queryParams.end_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
				<el-form-item label="单号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.sn"
						clearable
					/>
				</el-form-item>
                <el-form-item label="关联流水号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.p_sn"
						clearable
					/>
				</el-form-item>
                <el-form-item label="申请人">
					<el-input
						class="w-[240px]"
						v-model="queryParams.user_name"
						clearable
					/>
				</el-form-item>
				<el-form-item class="w-80">
                    <el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
			</el-card>
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="80" />
				<el-table-column label="单号" prop="sn" min-width="220" />
				<el-table-column label="申请时间" prop="create_time" min-width="180" />
                <el-table-column label="申请人" prop="user_name" min-width="120" />
                <el-table-column label="金额（元）" prop="money" min-width="160" />
                <el-table-column label="提现到银行" prop="bank_name" min-width="230" />
                <el-table-column label="提现到账号" prop="bank_code" min-width="190" />
                <el-table-column label="状态" prop="name" min-width="120">
                    <template #default="{ row }">
                        <span v-if="row.status == 0">申请中</span>
                        <span v-if="row.status == 1">通过</span>
                        <span v-if="row.status == 2">驳回</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作完成时间" prop="end_time" min-width="180" />
                <el-table-column label="关联流水号" prop="p_sn" min-width="170" />
                <el-table-column label="备注" prop="notice" min-width="220" />
                <el-table-column label="审核意见" prop="opinion" min-width="260">
                    <template #default="{ row }">
                        <el-tooltip
                            class="box-item"
                            effect="light"
                            :content="row.opinion"
                            placement="top-start"
                        >
                            <template #content>
                                <div style="width: 260px">{{ row.opinion }}</div>
                            </template>
                            <div class="line-clamp2">{{ row.opinion }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="name" min-width="180" fixed="right">
                    <template #default="{ row }">
                        <el-button v-if="row.status == 0" v-perms="['user.money/authWithdraw']" type="danger" link @click="handleReject(row.id)">审核驳回</el-button>
                        <el-button v-if="row.status == 0" v-perms="['user.money/authWithdraw']" type="primary" link @click="handlePass(row.id)">审核通过</el-button>
                    </template>
                </el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
            <el-dialog
                v-model="showCompany"
                title="提现申请"
                width="500"
            >
                <div class="flex">
                    <el-form ref="formSubmit" style="width: 100%;" :model="submitParams" :rules="rules" require-asterisk-position="right" label-position="top">
                        <el-form-item label="备注">
                            <el-input
                                v-model="submitParams.notice"
                                :rows="3"
                                type="textarea"
                                placeholder="请填写支付信息"
                            />
                        </el-form-item>
                        <el-form-item label="审核意见" prop="opinion">
                            <el-input
                                v-model="submitParams.opinion"
                                :rows="3"
                                style="width: 100%"
                                type="textarea"
                                placeholder="请填写审核意见"
                            />
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="showCompany = false">取消</el-button>
                        <el-button v-if="isType == 1" type="primary" @click="onPass">审核通过</el-button>
                        <el-button v-if="isType == 0" type="danger" @click="onReject">审核驳回</el-button>
                    </div>
                </template>
            </el-dialog>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="withdrawList">
	import { withdrawList, authWithdraw } from '@/api/finance';
	import { usePaging } from '@/hooks/usePaging';
    import type { FormInstance } from 'element-plus'
    const route = useRoute()
    import useAppStore from '@/stores/modules/app'
	const useApp = useAppStore()
	const queryParams:any = reactive({
		status: '',
        create_time: '',
        end_time: '',
        sn: '',
        p_sn: '',
        user_name: '',
        area_id: ''
	})
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: withdrawList,
		params: queryParams
	})
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
    const showCompany = ref(false)
    const withId = ref()
    const isType = ref(1) // 审核的类型 0 驳回 1 通过
    const rules = reactive({
        opinion: [
            {
                required: true,
                message: '请填写审核意见',
                trigger: ['blur']
            }
        ]
    })
    // 弹窗提交的表单
    const submitParams = reactive({
		notice: '',
        opinion: ''
	})
    const formSubmit = shallowRef<FormInstance>()
    const handleReject = (id: number) => {
        rules.opinion[0].required = true;
        showCompany.value = true;
        formSubmit.value?.resetFields()
        isType.value = 0;
        withId.value = id;
    }
    const handlePass = (id: number) => {
        rules.opinion[0].required = false;
        showCompany.value = true;
        formSubmit.value?.resetFields()
        isType.value = 1;
        withId.value = id;
    }
    // 弹窗里面的通过
    const onPass = async () => {
        await authWithdraw({
            id: withId.value,
            status: 1, // 1通过 2驳回
            ...submitParams
        })
        showCompany.value = false;
        getLists()
    }
    // 弹窗里面的驳回
    const onReject = async () => {
        try{
            await formSubmit.value?.validate()
            await authWithdraw({
                id: withId.value,
                status: 2, // 1通过 2驳回
                ...submitParams
            })
            showCompany.value = false;
            getLists()
        }catch(error){
            console.log(error)
        }
        
    }
    if (route.query.sn) {
		queryParams.sn = route.query.sn
	}
	getLists()
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>